<template>
  <el-form
    ref="form"
    class="gl_form_mini"
    :model="roundSettingsVO"
  >
    <el-row :gutter="20" class="gl_mb_10">
      <el-col :span="2" style="line-height: 28px;">回合{{ number }}</el-col>
      <el-col :span="4" style="line-height: 28px;">
        <el-radio v-model="roundSettingsVO.roundTypeCode" label="Normal" :disabled="typeCode === 'check'">正常比赛</el-radio>
      </el-col>
      <template v-if="typeCode === 'check'">
        <el-col :span="18" style="line-height: 28px;">
          <span>{{ roundSettingsVO.roundTimeMinutes }}（分）</span>
          <span>{{ roundSettingsVO.roundTimeSeconds }}（秒）</span>
        </el-col>
      </template>
      <template v-else>
        <el-col :span="6">
          <el-input-number
            v-model="roundSettingsVO.roundTimeMinutes"
            :min="0"
            style="width:100%"
            size="mini"
            clearable
            :rules="[
              { required: true, message: '分' }
            ]"
          />
        </el-col>
        <el-col :span="6">
          <el-input-number
            v-model="roundSettingsVO.roundTimeSeconds"
            :min="0"
            style="width:100%"
            size="mini"
            clearable
            :rules="[
              { required: true, message: '秒' }
            ]"
          />
        </el-col>
      </template>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" :offset="2" style="line-height: 28px;">
        <el-radio v-model="roundSettingsVO.roundTypeCode" label="Divided" :disabled="typeCode === 'check'">分局比赛</el-radio>
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col :span="3" style="line-height: 28px;">分局数量</el-col>
          <el-col :span="13" style="line-height: 28px;">
            <template v-if="typeCode === 'check'">
              <span>{{ roundSettingsVO.partsNumber }}</span>
            </template>
            <template v-else>
              <el-input-number
                v-model="roundSettingsVO.partsNumber"
                :min="1"
                :max="10"
                :disabled="disabled"
                style="width:97%"
                size="mini"
              />
            </template>
          </el-col>
        </el-row>
        <el-row v-for="(item, index) in roundSettingsVO.parts" :key=" 'check_' + number + '_' +index" :gutter="20" class="gl_mt_10">
          <el-col :span="3" style="line-height: 28px;">分局{{ index + 1 }}</el-col>
          <template v-if="typeCode === 'check'">
            <el-col :span="12" style="line-height: 28px;">
              <span>{{ item.partTimeMinutes }}（分）</span>
              <span>{{ item.partTimeSeconds }}（秒）</span>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="8">
              <el-input-number
                v-model="item.partTimeMinutes"
                :min="0"
                style="width:100%"
                size="mini"
                clearable
                :disabled="disabled"
                :rules="[
                  { required: true, message: '分' }
                ]"
              />
            </el-col>
            <el-col :span="8">
              <el-input-number
                v-model="item.partTimeSeconds"
                :min="0"
                style="width:100%"
                size="mini"
                clearable
                :disabled="disabled"
                :rules="[
                  { required: true, message: '秒' }
                ]"
              />
            </el-col>
          </template>
        </el-row>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { CopyData } from '@/lib';
class RoundSettingsVO {
  constructor() {
    this.roundTypeCode = 'Normal';
    this.roundNumber = 0;
    this.partsNumber = 1;
    this.roundTimeMinutes = 0;
    this.roundTimeSeconds = 0;
    this.roundType = '';
    this.parts = [];
  }
}
export default {
  props: {
    number: {
      type: Number,
      required: true
    },
    roundSetting: {
      type: Array,
      required: true
    },
    typeCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      roundSettingsVO: new RoundSettingsVO(),
      disabled: false
    };
  },
  watch: {
    'roundSettingsVO.partsNumber': {
      immediate: true,
      deep: true,
      handler(val) {
        // this.roundSettingsVO.parts = [];
        if (val) {
          if (this.roundSettingsVO.parts.length < val) {
            for (let i = 0; i < val; i++) {
              if (!this.roundSettingsVO.parts[i]) {
                const partItem = {
                  partTimeMinutes: 0,
                  partTimeSeconds: 0,
                  partNumber: i + 1
                };
                this.roundSettingsVO.parts.push(partItem);
              }
            }
          } else {
            this.roundSettingsVO.parts = val > 0 ? this.roundSettingsVO.parts.splice(0, val) : [];
          }
        }
      }
    },
    'roundSettingsVO.roundTypeCode': {
      handler(val) {
        if (val === 'Normal') {
          this.disabled = true;
        } else {
          this.disabled = false;
        }
      },
      immediate: true
    },
    roundSetting: {
      handler() {
        this.init();
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const _roundSettingsVO = new RoundSettingsVO();
      _roundSettingsVO.roundNumber = this.number;
      console.log(JSON.parse(JSON.stringify(this.roundSetting)));
      console.log(this.number - 1);
      console.log(_roundSettingsVO.parts);
      if (this.roundSetting[this.number - 1]) {
        CopyData(this.roundSetting[this.number - 1], _roundSettingsVO);
        _roundSettingsVO.partsNumber = _roundSettingsVO.parts.length;
      }
      console.log(JSON.parse(JSON.stringify(_roundSettingsVO)));
      this.roundSettingsVO = Object.assign({}, _roundSettingsVO);
    },
    valid() {
      return new Promise((resolve, reject) => {
        // const roundSettingsVO = JSON.parse(JSON.stringify(this.roundSettingsVO));
        resolve(this.roundSettingsVO);
      });
    }
  }
};
</script>
